import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import './styles/base.css'
import './styles/index.css'
import createPersistedState from 'vuex-persistedstate'
Vue.config.productionTip = false

const store = new Vuex.Store({
  state: {
    list: [],
    arr: [],
    isSel: '',
  },
  mutations: {
    addTask(state, task) {
      let id =
        state.list.length == 0 ? 100 : state.list[state.list.length - 1].id + 1
      state.list.push({
        id: id,
        name: task,
        isDone: false,
      })
    },
    delTask(state, id) {
      let index = state.list.findIndex((obj) => obj.id === id)
      state.list.splice(index, 1)
    },
    // 全部数组
    allList(state) {
      state.isSel = 'isAll'
      state.arr = state.list
    },
    // 未完成数组
    unfinishedList(state) {
      state.isSel = 'no'
      state.arr = state.list.filter((obj) => obj.isDone === false)
    },
    // 完成数组
    finishedList: (state) => {
      state.isSel = 'yes'
      state.arr = state.list.filter((obj) => obj.isDone === true)
    },
    // 清除已完成
    clear: (state) => {
      state.list = state.arr.filter((obj) => obj.isDone === false)
      state.arr = state.list
    },
  },
  getters: {
    list: (state) => state.list,
    isAll: (state) => {
      return (
        state.list.length !== 0 &&
        state.list.every((obj) => obj.isDone === true)
      )
    },
    num: (state) => {
      return state.arr.length
    },
  },
  actions: {},
  modules: {},
  plugins: [
    createPersistedState({
      key: 'myVuex', // 指定名称 默认vuex
      // paths: ['list'], // 只可以指定缓存的模块 或者是模块里的字段
      reducer(state) {
        // 可以指定缓存 具体到摸一个字段
        return {
          // 只储存state中的token
          list: state.list,
          arr: state.arr,
        }
      },
      // 默认localStroage   sessionStorage   cookie
    }),
  ],
})
new Vue({
  render: (h) => h(App),
  store,
}).$mount('#app')
